import { useEffect, useState } from 'react'
import axios from 'axios'
import { ProductCard, Tag, Button } from 'react-vant';
import './App.css'
import store from './store';
import { SubmitBar, Checkbox } from 'react-vant';
import { List } from './api/students';
function App() {
  const [count, setCount] = useState([])
  
   async function fre(){
       const res = await List()
   
      localStorage.setItem('list',JSON.stringify(res.data))
     setCount(store.getState().list)
  
    }

  useEffect(  () => {
    fre()
   
  }, [])
  store.subscribe(()=>{
    setCount(store.getState().list)
    localStorage.setItem('list',JSON.stringify(store.getState()))
  })
  let jia=(id)=>{
    store.dispatch({
      type:'JIA',
      id
    })
  }
  let jian=(id)=>{
    store.dispatch({
      type:'JIAN',
      id
    })
  }
  let zong=()=>{
   let aa= count.map(item=>{
     return item.num*item.price
    })
    console.log(aa)
   let bb= aa.reduce((prive,item)=>{
      prive+=item
      return prive
    },0)
    return bb
  }
  return (
    <>
    {
       count.map(item=>{
        return (
          <ProductCard
          key={item.id}
      num={item.num}
      price={item.price}
      desc="描述信息"
      title={item.name}
      thumb="https://img.yzcdn.cn/vant/ipad.jpeg"
      tags={
        <>
          <Tag plain type="danger" style={{ marginRight: 5}}>
            标签
          </Tag>
          <Tag plain type="danger">
            标签
          </Tag>
        </>
      }
      footer={
        <>
          <Button size="mini" round plain style={{ marginRight: 2 ,width:'20px',height:'20px'}} onClick={()=>jian(item.id)}>
            -
          </Button>
          <Button size="mini" round plain style={{width:'20px',height:'20px'}} onClick={()=>jia(item.id)}>
            +
          </Button>
        </>
      }
    />
        )
       })
    }
   
     
   <div className="demo-submit-bar">
    <SubmitBar
      price={zong()*100}
      buttonText="提交订单"
      tip={
        <>
          你的收货地址不支持同城送,
          <span style={{ color: '#1989fa' }}>修改地址</span>
        </>
      }
    >
      <Checkbox>全选</Checkbox>
    </SubmitBar>
    </div>
    </>
  )
}

export default App
